<template>
    <div class="app-container">

        <div>
            <div class="avatarBox">
              <div class="avatar">
                <el-avatar shape="square" :src="require('@/assets/images/profile.jpg')"></el-avatar>
              </div>
              <div>
                <div class="tit">
                    {{ form.companyName }}
                    <el-tag type="info" size="mini" v-if="form.status == 0">{{ form.statusStr }}</el-tag>
                    <el-tag type="success" size="mini" v-if="form.status == 1">{{ form.statusStr }}</el-tag>
                </div>
                <div>企业编码：{{ form.companyCode }}</div>
              </div>
            </div>
        </div>

        <el-tabs v-model="activeName">
            <el-tab-pane label="基本信息" name="baseInfo">

                <div class="baseInfoBox">
                    <el-row>
                        <el-col :span="9">
                            <el-descriptions :column="1" :label-style="{'width':'120px'}">
                                <el-descriptions-item label="企业名称">{{ form.companyName }}</el-descriptions-item>
                                <el-descriptions-item label="企业编码">{{ form.companyCode }}</el-descriptions-item>
                                <el-descriptions-item label="所在城市">{{ form.cityLabel }}</el-descriptions-item>
                                <el-descriptions-item label="创建方式">{{ form.signTypeStr }}</el-descriptions-item>
                                <el-descriptions-item label="创建人">{{ form.creatorName || '-' }}</el-descriptions-item>
                                <el-descriptions-item label="创建时间">{{ form.createTime }}</el-descriptions-item>
                                <el-descriptions-item label="企业状态">
                                    <el-tag type="info" size="mini" v-if="form.status == 0">{{ form.statusStr }}</el-tag>
                                    <el-tag type="success" size="mini" v-if="form.status == 1">{{ form.statusStr }}</el-tag>                                    
                                </el-descriptions-item>
                            </el-descriptions>
                        </el-col>
                        <el-col :span="9">
                            <el-descriptions :column="1" :label-style="{'width':'120px'}">
                                <el-descriptions-item label="归属运营商">{{ form.deptName }}</el-descriptions-item>
                                <el-descriptions-item label="超级管理员">{{ form.userName }}{{ '（' + form.phonenumber + '）' }}</el-descriptions-item>
                                <el-descriptions-item label="负责人">{{ form.leader }}</el-descriptions-item>
                                <el-descriptions-item label="负责人手机号">{{ form.leaderPhone }}</el-descriptions-item>
                                <el-descriptions-item label="企业认证">
                                    <el-tag type="info" size="mini" v-if="form.waterStatus == 0">{{ form.authStatusStr }}</el-tag>
                                    <el-tag type="success" size="mini" v-if="form.waterStatus == 1">{{ form.authStatusStr }}</el-tag>
                                    <el-tag type="warning" size="mini" v-if="form.waterStatus == 2">{{ form.authStatusStr }}</el-tag>
                                    <el-tag type="danger" size="mini" v-if="form.waterStatus == 3">{{ form.authStatusStr }}</el-tag>
                                    <el-button size="mini" type="text" @click="handleAuth(id)" style="margin-left:10px;">
                                        {{form.authStatus === 0 ? '发起认证' : '编辑认证'}}
                                    </el-button>
                                </el-descriptions-item>
                                <el-descriptions-item label="首次认证时间">{{ form.authTime || '-' }}</el-descriptions-item>
                                <el-descriptions-item label="认证更新时间">{{ form.authUpdateTime || '-' }}</el-descriptions-item>
                            </el-descriptions>
                        </el-col>
                        <el-col :span="6">
                            <el-descriptions :column="1":label-style="{'width':'120px'}">
                                <el-descriptions-item label="船运资质认证">
                                    <el-tag type="info" size="mini" v-if="form.waterStatus == 0">{{ form.waterStatusStr }}</el-tag>
                                    <el-tag type="success" size="mini" v-if="form.waterStatus == 1">{{ form.waterStatusStr }}</el-tag>
                                    <el-tag type="warning" size="mini" v-if="form.waterStatus == 2">{{ form.waterStatusStr }}</el-tag>
                                    <el-tag type="danger" size="mini" v-if="form.waterStatus == 3">{{ form.waterStatusStr }}</el-tag>
                                    <el-button size="mini" type="text" @click="handleWaterAuth(id)" style="margin-left:10px;">
                                        {{form.waterStatus === 0 ? '发起认证' : '编辑认证'}}
                                    </el-button>
                                </el-descriptions-item>
                                <el-descriptions-item label="首次认证时间">{{ form.waterAuthTime || '-' }}</el-descriptions-item>
                                <el-descriptions-item label="认证更新时间">{{ form.waterAuthUpdateTime || '-' }}</el-descriptions-item>
                            </el-descriptions>
                        </el-col>
                    </el-row>
                </div>

            </el-tab-pane>
            <el-tab-pane label="认证资料" name="authInfo">
                
                <div class="box">
                    <el-descriptions :column="1" title="| 营业执照信息" :label-style="{'width':'120px'}">
                        <el-descriptions-item label="营业执照">
                            <el-image :src="form.businessLicenseImg || require('@/assets/images/default-video-img.png')" fit="contain" class="thumbnail"></el-image>
                        </el-descriptions-item>
                        <el-descriptions-item label="真实企业名称">{{ form.companyName }}</el-descriptions-item>
                        <el-descriptions-item label="营业执照号">{{ form.businessLicenseNo }}</el-descriptions-item>
                    </el-descriptions>

                    <el-descriptions :column="1" title="| 法人信息" :label-style="{'width':'120px'}" :style="{'margin-top':'20px'}">
                        <el-descriptions-item label="法人手机号">{{ form.corpMobile }}</el-descriptions-item>
                        <el-descriptions-item label="法人身份证正面">
                            <el-image :src="form.corpIdentityBack || require('@/assets/images/default-video-img.png')" fit="contain" class="thumbnail"></el-image>
                            <el-image :src="form.corpIdentityFront || require('@/assets/images/default-video-img.png')" fit="contain" class="thumbnail"></el-image>
                        </el-descriptions-item>
                        <el-descriptions-item label="法人姓名">{{ form.corpName }}</el-descriptions-item>
                        <el-descriptions-item label="身份证号码">{{ form.corpIdentityCard }}</el-descriptions-item>
                        <el-descriptions-item label="身份证有效期">{{ form.corpIdentityStart }}</el-descriptions-item>
                        <el-descriptions-item label="身份证地址">{{ form.corpIdentityAddress }}</el-descriptions-item>
                    </el-descriptions>

                    <el-descriptions :column="1" title="| 船运资质认证" :label-style="{'width':'120px'}" :style="{'margin-top':'20px'}">
                        <el-descriptions-item label="发证机关名称">{{ form.corpIdentityOrg }}</el-descriptions-item>
                        <el-descriptions-item label="水路运输许可证">
                            <el-image :src="form.waterTransportImg || require('@/assets/images/default-video-img.png')" fit="contain" style="height:150px;"></el-image>
                        </el-descriptions-item>
                        <el-descriptions-item label="水路运输许可证号">{{ form.waterTransportNo }}</el-descriptions-item>
                    </el-descriptions>
                </div>

            </el-tab-pane>
        </el-tabs>

        <company-user-list :companyId="id"></company-user-list>
    </div>
</template>

<script>
    // 导入接口方法
    import { fetchCompanyAuth, getCompanyById } from '@/api/enterprise/index';
    import companyUserList from '@/views/enterprise/detail/components/CompanyUserList.vue';
    export default {
        name: 'CompanyAuthDetail',
        dicts: [],
        components: { companyUserList },
        data() {
            return {
                // 标题
                title: '企业认证信息',
                // 初始化 id 为 null
                id: null,
                activeName: 'baseInfo',
                // 表单参数
                form: {
                    companyName: '',
                    companyCode: null,
                    cityLabel: '',
                    signTypeStr: '',
                    creatorName: '',
                    createTime: null,
                    status: null,
                    statusStr: '',
                    deptName: '',
                    userName: '',
                    phonenumber: '',
                    leader: '',
                    leaderPhone: '',
                    authStatus: null,
                    authStatusStr: '',
                    authTime: null,
                    authUpdateTime: null,
                    waterStatus: null,
                    waterStatusStr: '',
                    waterAuthTime: null,
                    waterAuthUpdateTime: null,
                    businessLicenseImg: null,
                    businessLicenseNo: '',
                    corpMobile: '',
                    corpIdentityFront: null,
                    corpIdentityBack: null,
                    corpName: '',
                    corpIdentityCard: '',
                    corpIdentityStart: '',
                    corpIdentityAddress: '',
                    corpIdentityOrg: '',
                    waterTransportImg: null,
                    waterTransportNo: '',
                },
            };
        },
        created() {
            this.init(this.$route.query.id);
        },
        watch: {
            '$route.query.id': {
                handler(newId, oldId) {
                    this.init(newId);
                }
            }
        },
        methods: {
            init(id) {
                console.log(id);
                this.id = id || 0;
                if(this.id) {
                    this.getDetail(this.id);
                    this.getAuthDetail(this.id);
                }
            },
            // 获取企业基本信息
            getDetail(id) {
                getCompanyById(id).then((res) => {
                    if (res.code == 200) {
                        const {
                            companyName,
                            companyCode,
                            cityLabel,
                            signTypeStr,
                            creatorName,
                            createTime,
                            status,
                            statusStr,
                            deptName,
                            userName,
                            phonenumber,
                            leader,
                            leaderPhone,
                            authStatus,
                            authStatusStr,
                            authTime,
                            authUpdateTime,
                            waterStatus,
                            waterStatusStr,
                            waterAuthTime,
                            waterAuthUpdateTime,
                        } = res.data;

                        this.form = {
                            companyName,
                            companyCode,
                            cityLabel,
                            signTypeStr,
                            creatorName,
                            createTime,
                            status,
                            statusStr,
                            deptName,
                            userName,
                            phonenumber,
                            leader,
                            leaderPhone,
                            authStatus,
                            authStatusStr,
                            authTime,
                            authUpdateTime,
                            waterStatus,
                            waterStatusStr,
                            waterAuthTime,
                            waterAuthUpdateTime,
                        };
                    }
                });
            },
            // 获取企业认证信息
            getAuthDetail(id) {
                fetchCompanyAuth(id).then((res) => {
                    if (res.code == 200) {
                        const {
                            businessLicenseImg,
                            businessLicenseNo,
                            corpMobile,
                            corpIdentityFront,
                            corpIdentityBack,
                            corpName,
                            corpIdentityCard,
                            corpIdentityStart,
                            corpIdentityAddress,
                            corpIdentityOrg,
                            waterTransportImg,
                            waterTransportNo,
                        } = res.data;

                        this.form = {
                            businessLicenseImg,
                            businessLicenseNo,
                            corpMobile,
                            corpIdentityFront,
                            corpIdentityBack,
                            corpName,
                            corpIdentityCard,
                            corpIdentityStart,
                            corpIdentityAddress,
                            corpIdentityOrg,
                            waterTransportImg,
                            waterTransportNo,
                        };
                    }
                });
            },
            // 认证企业
            handleAuth(id) {
                this.$router.push({ name: 'CompanyAuth', query: { id } });
            },
            // 认证企业船舶资质
            handleWaterAuth(id) {
                this.$router.push({ name: 'CompanyWaterAuth', query: { id } });
            },
        },
    };
</script>

<style lang="scss" scoped>
    .container { position: relative; }
    .submit-btn { position: fixed; bottom: 10px; left: 50%;}
    .thumbnail { 
        height: 150px; 
        margin-right: 10px;
        border: 1px solid CCC;
    }
    .box { padding: 20px; }
    .baseInfoBox {
        margin: 15px;
        padding: 15px 20px 10px 20px;
        box-sizing: border-box;
        border:1px solid #CCC;
        border-radius: 8px;
    }
    .tit {
        font-size: 18px;
        font-weight: bold;
    }
    .avatar {
        margin-right:10px;
        border: 1px solid #ccc;
        border-radius: 6px;
    }
    .avatarBox {
        margin-bottom: 20px;
        display: flex; 
        align-items: center
    }
</style>
